import './style.less'

import React, { useEffect, useState } from 'react'
import { LdhPage, LdhPageBody } from '@biz/PageCompnents'
import AForm from '@/components/AForm'
import {
  onPostAddCouponXhr,
  onGetCouponDetailXhr,
  onPostEditCouponXhr,
} from '@/api/coupon'
import AToast from '@/components/AToast'
import { useNavigate, useSearchParams } from 'react-router-dom'
// import { listMock } from './mock'
const AddCoupon = () => {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams() // 获取查询参数
  const id = searchParams.get('id')
  const type = searchParams.get('type')
  const [detail, setDetail] = useState(null)
  const preMessage = id ? '编辑优惠券' : '添加优惠券'
  const sectionlist = [
    {
      label: '优惠券名称',
      name: 'name',
      rules: [
        {
          required: true,
          message: '请输入优惠券名称',
        },
      ],
      maxLength: 60,
    },
    {
      label: '副标题',
      name: 'subTitle',
      maxLength: 60,
    },
    {
      label: '抵扣洗车时长',
      name: 'deductionDuration',
      placeholder: '请输入（分钟）',
      rules: [
        {
          required: true,
          message: '请输入抵扣洗车时长',
        },
      ],
    },
    {
      label: '有效天数',
      name: 'expDay',
      placeholder: '领取后的有效天数',
      rules: [
        {
          required: true,
          message: '请输入有效天数',
        },
      ],
    },
    {
      label: '库存',
      name: 'stockQuantity',
      placeholder: '请输入库存数量',
      rules: [
        {
          required: true,
          message: '请输入库存数量',
        },
      ],
    },
    {
      label: '结算金额',
      name: 'settlementAmount',
      placeholder: '请输入结算金额',
      rules: [
        {
          required: true,
          message: '请输入结算金额',
        },
      ],
    },
    {
      type: 'textArea',
      label: '使用规则',
      name: 'rule',
      maxLength: 200,
    },
    {
      type: 'radio',
      label: '上架状态',
      name: 'status',
      options: [
        {
          label: '上架',
          value: 1,
          defaultChecked: true,
        },
        {
          label: '禁用',
          value: -1,
        },
      ],
    },
  ]
  const onSubmit = async (formData) => {
    const xhr = id ? onPostEditCouponXhr : onPostAddCouponXhr
    const params = id ? { ...formData, id } : formData
    try {
      const res = await xhr(params)
      if (res?.success) {
        AToast.success(`${preMessage}成功`)
        setTimeout(() => {
          navigate(`/page/product/coupon`)
        }, 1200)
      } else {
        AToast.error(`${preMessage}失败: ${res?.message}`)
      }
    } catch (e) {
      AToast.error(`${preMessage}失败: ${e}`)
    }
  }

  // 获取优惠券详情
  const getCouponDetail = async (id) => {
    if (!id) return

    try {
      const res = await onGetCouponDetailXhr({ id })
      if (res?.success) {
        setDetail(res?.vo)
        // setDetail(listMock[0]) // mock数据
      }
    } catch (e) {
      console.log('获取优惠券详情失败' + e)
    }
  }
  useEffect(() => {
    if (!id) return
    getCouponDetail(id)
  }, [id])
  return (
    <LdhPage
      className="verification-page"
      title={type !== 'detail' ? preMessage : '优惠券详情'}
    >
      <LdhPageBody>
        <AForm
          title="产品配置"
          sectionlist={sectionlist}
          onSubmit={onSubmit}
          detail={detail}
          type={type}
        />
      </LdhPageBody>
    </LdhPage>
  )
}
export default AddCoupon
